<template>
	<view class="poster">
		<canvas class="poster-canvas" canvas-id="poster" style="width: 600rpx; height: 816rpx;"></canvas>
		<view class="save">保存到相册</view>
	</view>
</template>

<script>
	export default {
		props: {
			proMainSrc: {
				type: String,
				default: 'https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/static/images/major_img/2020-08-01/20200801/90e5f470f78c89e2874d66ec1b77bad1.jpg'
			}
		},
		data() {
			return {
				mainPic: 'https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/static/images/major_img/2020-08-01/20200801/90e5f470f78c89e2874d66ec1b77bad1.jpg',
				avatar: 'https://wx.qlogo.cn/mmopen/vi_32/2fu1ib3VdazU0zLcEjVOgiclfeKAiaNL1TSQ568qMRQsDIvibl81BJvL40ymiaWibWw4edDv8oBtjYicBEnUzrOVH2LYA/132'
			};
		},
		onLoad() {
			console.log('123123')
		},
		methods: {
			async OnCanvas() {
				let _this = this;
				_this.ctx = uni.createCanvasContext('poster',this);
				const systemInfo = uni.getSystemInfoSync()
				const proImgInfo = await _this.getImageInfo({ imgSrc: _this.mainPic }); // 商品图
				const avatarImgInfo = await _this.getImageInfo({ imgSrc: _this.avatar }); // 商品图
				_this.canvasW = uni.upx2px(600);
				_this.canvasH = uni.upx2px(816);
				
				_this.ctx.setFillStyle('#FFFFFF');
				_this.ctx.fillRect(0,0,_this.canvasW,_this.canvasH)
				
				// 绘制产品图
				_this.ctx.drawImage(proImgInfo.path, 0, 0, uni.upx2px(600), uni.upx2px(480));
				
				//绘制用户名称跟背景
				const name = 'PT-TAL'
				_this.roundRectColor(_this.ctx, uni.upx2px(25), uni.upx2px(415), name.length * uni.upx2px(20) + uni.upx2px(30), uni.upx2px(40),  uni.upx2px(40));
				_this.ctx.setFontSize(uni.upx2px(20));
				_this.ctx.setFillStyle('#FFF');
				_this.ctx.fillText(name, uni.upx2px(75) , uni.upx2px(440));
				
				// 绘制头像
				_this.ctx.save()
				_this.ctx.beginPath()
				_this.ctx.arc(uni.upx2px(40), uni.upx2px(435), uni.upx2px(21), 0, Math.PI * 2, false);
				_this.ctx.clip()
				_this.ctx.stroke();
				_this.ctx.drawImage(avatarImgInfo.path, uni.upx2px(20), uni.upx2px(414), uni.upx2px(43), uni.upx2px(43))
				
				_this.ctx.restore()
				
				//延迟后渲染至canvas上
				setTimeout(function() {
					_this.ctx.draw();
				}, 600);
			},
			
			async roundRectColor(context, x, y, w, h, r) {  //绘制圆角矩形（纯色填充）
			  context.save();
			  context.setFillStyle("#000");
			  context.setStrokeStyle('#000')
			  context.setLineJoin('round');  //交点设置成圆角
			  context.setLineWidth(r);
			  context.strokeRect(x + r/2, y + r/2, w - r , h - r );
			  context.fillRect(x + r, y + r, w - r * 2, h - r * 2);
			  context.stroke();
			  context.closePath();
			},
			
			async getImageInfo({ imgSrc }) {
				uni.showLoading({
					title: '正在生成海报',
					mask: true
				})
				return new Promise((resolve, errs) => {
					if(imgSrc.indexOf('https')!=-1){
						uni.downloadFile({
							url: imgSrc,
							success:function(res){
								uni.getImageInfo({
									src: res.tempFilePath,
									success: function(image) {
										uni.hideLoading()
										resolve(image);
									},
									fail(err) {
										uni.hideLoading()
										uni.showToast({
											title: '生成失败，请退出重试',
											icon: 'none',
											duration: 1500
										})
										errs(err);
									}
								});
							}
						})
					}else{
						uni.getImageInfo({
							src: imgSrc,
							success: function(image) {
								uni.hideLoading()
								resolve(image);
							},
							fail(err) {
								uni.hideLoading()
								uni.showToast({
									title: '生成失败，请退出重试',
									icon: 'none',
									duration: 1500
								})
								errs(err);
							}
						});
					}
				});
			}
		},
		mounted() {
			this.OnCanvas()
		}
	}
</script>

<style lang="scss">
	.poster{
		width: 600rpx;
		background-color: #FFF;
		overflow: hidden;
		.poster-canvas{
			display: block;
			border-radius: 10rpx 10rpx 0 0;
		}
		.save{
			margin: 40rpx;
			height: 88rpx;
			line-height: 88rpx;
			background: rgba(20,20,20,1);
			border-radius: 8rpx;
			text-align: center;
			color: #FFF;
			font-size: 32rpx;
			font-weight: bold;
		}
	}
</style>
